import watermark from '../../../common/watermark.js';
import vehicleApi from "../../../common/api/breedsales/vehicle.api.js"
import { Collaboration_APP, TEST_NUMBER, YY_NUMBER } from '../../../../../public/js/config/config.js';

(function (window, document, $) {

    new Vue({
        el: '#vehicle-app',
        data() {
            return {
                navList: [
                    { text: '未处理', value: 1 },
                    { text: '已处理', value: 2 },
                ],
                activeNavValue: 1,
                queryKey: '',
                listSubHeight: 0,
                startY: 0,
                endY: 0,
                oStartY: 0,
                showReloadTip: false,
                reloadHeight: 0,
                showDatePicker: false,
                dialogTitle: '',
                queryDate: moment().format('YYYY-MM-DD'),
                pageInfo: {
                    pageIndex: 0,
                    pageSize: 10
                },
                vehicleList: [],
                timer: null,
                isHandle: false,
                submitId: '',
                tags: '',
                selectItem: {},
                dialogType: '',
                changetags: '',
                confirmDialogResult: '',
                isEnd: false
            }
        },
        filters: {
            toThousands: (data) => {
                return Utils.toThousands(data)
            }
        },
        computed: {
            queryDateStr({ queryDate }) {
                return moment(queryDate).format('YYYY年M月D日')
            }
        },
        created() {
            $(`#vehicle-app`).removeClass('d-none')
            this.queryDate = moment().format('YYYY-MM-DD')
            let url = location.href
            let params = {} // url参数
            for (let key of (new URL(url)).searchParams.entries()) {
                key[1] ? params[key[0]] = key[1] : ''
            }
            this.getList()
        },
        mounted() {
            this.pullLoad();
            this.watermarkBgImg()
        },
        methods: {
            initResultSelect() {
                let that = this
                let resultOptions = [
                    { id: 1, text: '合格' },
                    { id: 0, text: '其他' }
                ]
                $(`#result`).select2({
                    placeholder: '请选择检测结果...', //默认文字提示
                    language: "zh-CN",//汉化
                    data: resultOptions,
                    width: '100%'
                })
                $(`#result`).on('change', function () {
                    that.confirmDialogResult = $(this).val()
                })
            },
            // 点击选项栏
            clickNav(item) {
                this.activeNavValue = item.value
                this.reloadList()
            },
            // 搜索列表
            search() {
                this.reloadList()
            },
            // 刷新列表
            reloadList() {
                this.pageInfo.pageIndex = 0
                this.isEnd = true
                this.getList()
            },
            // 获取列表
            getList() {
                if (this.loading) return
                let date = moment(this.queryDate).format('YYYY-MM-DD')
                let query = {
                    ...this.pageInfo,
                    type: this.activeNavValue,
                    carNo: this.queryKey,
                    startDate: date,
                    endDate: date,
                }
                this.loading = true
                vehicleApi.getVehicleList(query).then(res => {
                    this.loading = false
                    let list = res.items.map(item => {
                        return {
                            ...item,
                            bizDateStr: item.bizDate ? moment(item.bizDate).format('YYYY年M月D日') : '',
                            resultStr: item.result ? '合格' : '其他'
                        }
                    })
                    if (this.pageInfo.pageIndex === 0) {
                        this.vehicleList = list
                    } else {
                        this.vehicleList = this.vehicleList.concat(list)
                    }
                    this.isEnd = this.vehicleList.length >= res.totalCount
                    this.isHandle = this.activeNavValue === 2
                })
                    .catch(() => {
                        this.loading = false
                    })
            },
            // 清空搜索框
            clearSearch() {
                this.queryKey = ''
                this.reloadList()
            },
            isTop() {
                var t = document.documentElement.scrollTop || document.body.scrollTop;
                return t === 0 ? true : false;
            },

            //TODO : 上拉加载
            pullLoad() {
                let that = this
                // 监听滚动的父容器
                $("#vehicle-list").infinite().on("infinite", () => {
                    if (this.timer || this.isEnd) return
                    this.timer = setTimeout(() => {
                        this.timer = null
                    }, 500);
                    this.pageInfo.pageIndex = this.pageInfo.pageIndex + 1
                    this.getList()
                });
            },
            // 点击合格
            confirm(item) {
                this.selectItem = item
                this.dialogType = 'confirm'
                this.dialogTitle = '确认提示'
                this.confirmDialogResult = true
            },
            // 点击其他
            other(item) {
                this.selectItem = item
                this.dialogType = 'other'
                this.dialogTitle = '车辆采样检测处理'
                this.confirmDialogResult = false
            },
            //修改检测结果
            editResult(item) {
                this.dialogType = 'changeResult'
                this.selectItem = item
                this.dialogTitle = '修改车辆检测结果'
                this.$nextTick(() => {
                    this.initResultSelect()
                    $(`#result`).val(item.result ? 1 : 0).trigger('change')
                })
            },
            // 弹窗取消
            cancelOther() {
                this.tags = ''
                this.selectItem = {}
                this.dialogType = ''
            },
            // 弹窗提交
            submitOther() {
                this.submitVehicle()
            },

            // 提交信息
            submitVehicle() {
                let result = this.confirmDialogResult
                let { dialogType, selectItem, tags, changetags } = this
                let promise = null
                if (dialogType === 'other' || dialogType === 'confirm') {
                    let params = {
                        id: this.selectItem.id,
                        result,
                        tags: this.tags
                    }
                    promise = vehicleApi.submitVehicle(params)
                } else {
                    let params = {
                        id: selectItem.id,
                        result: !!(Number(result)),
                        tags: changetags
                    }
                    promise = vehicleApi.updateVehicle(params)
                }
                promise.then(res => {
                    this.tags = ''
                    this.changetags = ''
                    this.selectItem = {}
                    this.reloadList()
                    this.dialogType = ''
                })
                    .catch(err => {
                        this.dialogType = ''
                    })
            },

            // 返回主页
            returnHome() {
                location.href = '../../main.html'
            },

            // 点击日期选择
            clickDate() {
                let that = this
                that.showDatePicker = true
                let defaultValue = this.queryDate.split('-')
                weui.datePicker({
                    defaultValue,
                    container: 'body',
                    onConfirm: function (result) {
                        that.queryDate = result.map(item => item.value).join('-')
                        that.reloadList()
                        that.showDatePicker = false
                    },
                    onClose: function () {
                        that.showDatePicker = false
                    },
                    id: 'datePicker'
                });
            },
            // 改变日期 单天
            changeOneDay(type) {
                let queryDate = moment(this.queryDate)
                if (type === 'pre') {
                    queryDate = queryDate.subtract(1, 'days')
                } else {
                    queryDate = queryDate.add(1, 'days')
                }
                this.queryDate = queryDate.format('YYYY-MM-DD')
                this.reloadList()
            },
            //水印信息
            watermarkBgImg() {
                let _userInfo = JSON.parse(Utils.GetSessionStorage("SNAccountEply")) || {};
                watermark.set(_userInfo.name + _userInfo.numCode);// 水印
                //vehicleApi.queryUserName(Utils.GetQueryString('state') || YY_NUMBER.sourceID).then(res => {
                //    watermark.set(_userInfo.un + res.code);// 水印
                //}).catch(_ => {
                //    watermark.set(_userInfo.un);// 水印
                //});
            }
        }
    });

})(window, document, jQuery)